<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="前端，技术，博客，记录，javascript，html5，css">
<meta property="og:type" content="website">
<meta property="og:title" content="宅鱼">
<meta property="og:url" content="http://ikkkr.com/page/3/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="前端，技术，博客，记录，javascript，html5，css">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="宅鱼">
<meta name="twitter:description" content="前端，技术，博客，记录，javascript，html5，css">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-jquery-e4-b8-ad-e4-bd-bf-e7-94-a8hover-e5-a4-9a-e6-ac-a1-e5-87-ba-e5-8f-91-e5-8a-a8-e7-94-bb-e7-9a-84-e9-97-ae-e9-a2-98" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/26/jquery-e4-b8-ad-e4-bd-bf-e7-94-a8hover-e5-a4-9a-e6-ac-a1-e5-87-ba-e5-8f-91-e5-8a-a8-e7-94-bb-e7-9a-84-e9-97-ae-e9-a2-98/" class="article-date">
  <time datetime="2014-03-26T02:59:35.000Z" itemprop="datePublished">2014-03-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/jquery/">jquery</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/03/26/jquery-e4-b8-ad-e4-bd-bf-e7-94-a8hover-e5-a4-9a-e6-ac-a1-e5-87-ba-e5-8f-91-e5-8a-a8-e7-94-bb-e7-9a-84-e9-97-ae-e9-a2-98/">jquery中使用hover多次出发动画的问题</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>在对元素使用hover后，如果触发的是一个动画效果，鼠标多次在元素上划过则会多次触发动画，这样在鼠标离开后，动画还会反复多次的执行。jquery提供了一个专门的stop函数来停止正在执行的动画，并触发新的动画而不会反复执行。<br>示例如下:</p>
<pre>
$(".c_slideitem").hover(function() {
    var _this = $(this).find(".j-box");
    _this.stop(true).animate({
        "margin-top": "0px"
    }, 200);
}, function() {
    var _this = $(this).find(".j-box");
    _this.stop(true).animate({
        "margin-top": "150px"
    }, 500);
});
</pre>
      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jquery/">jquery</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-timthumb-e7-bc-a9-e7-95-a5-e5-9b-be-e4-b8-8d-e6-98-be-e7-a4-ba-e9-97-ae-e9-a2-98-e5-a4-84-e7-90-86" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/25/timthumb-e7-bc-a9-e7-95-a5-e5-9b-be-e4-b8-8d-e6-98-be-e7-a4-ba-e9-97-ae-e9-a2-98-e5-a4-84-e7-90-86/" class="article-date">
  <time datetime="2014-03-25T14:29:33.000Z" itemprop="datePublished">2014-03-25</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/php/">php</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/03/25/timthumb-e7-bc-a9-e7-95-a5-e5-9b-be-e4-b8-8d-e6-98-be-e7-a4-ba-e9-97-ae-e9-a2-98-e5-a4-84-e7-90-86/">TimThumb缩略图不显示问题处理</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>1.自定义栏目定义的字段和&lt; ?php echo get_post_meta( $post-&gt;ID, “thumbnail_url”, true ); ?&gt; 这里设置的thumbnail_url一致<br>2.timthumb的代码一定要是最新代码，我因为这个代码版本旧了图片一直不显示倒腾了几天也找不到原因。。。大坑timthumb最新代码地址: <a href="http://code.google.com/p/timthumb" target="_blank" rel="noopener">http://code.google.com/p/timthumb</a></p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/php/">php</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/wordpress/">wordpress</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e8-bd-acthree-js-html5-audio-api-e6-89-93-e9-80-a03d-e9-9f-b3-e4-b9-90-e9-a2-91-e8-b0-b1-ef-bc-8clets-rock" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/24/e8-bd-acthree-js-html5-audio-api-e6-89-93-e9-80-a03d-e9-9f-b3-e4-b9-90-e9-a2-91-e8-b0-b1-ef-bc-8clets-rock/" class="article-date">
  <time datetime="2014-03-24T03:56:12.000Z" itemprop="datePublished">2014-03-24</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/html5/">html5</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/03/24/e8-bd-acthree-js-html5-audio-api-e6-89-93-e9-80-a03d-e9-9f-b3-e4-b9-90-e9-a2-91-e8-b0-b1-ef-bc-8clets-rock/">[转]Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>继续玩味之前写的音乐频谱作品，将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现，这样就打造出了一个全立体感的频谱效果了。</p>
<p>项目详情及源码<br>项目GitHub地址：<a href="https://github.com/Wayou/3D_Audio_Spectrum_VIsualizer/tree/master" target="_blank" rel="noopener">https://github.com/Wayou/3D_Audio_Spectrum_VIsualizer/tree/master</a></p>
<p>在线演示地址：<a href="http://wayou.github.io/3D_Audio_Spectrum_VIsualizer" target="_blank" rel="noopener">http://wayou.github.io/3D_Audio_Spectrum_VIsualizer</a></p>
<p>如果你想的话，可以从这里下载示例音乐：<a href="http://pan.baidu.com/s/1eQqqSfS" target="_blank" rel="noopener">http://pan.baidu.com/s/1eQqqSfS</a></p>
<p>Note:<br>可以直接点击’play default’ 播放自带的音乐，神探夏洛克插曲，如果你也看了的话，听着应该会有感的<br>支持文件拖拽进行播放，将音频文件拖拽到页面即可<br>也可以通过文件上传按钮选择一个音频文件进行播放<br>鼠标拖拽可以移动镜头变换视野<br>鼠标滚轮可以进行缩放<br>右上角的控制面板可以进行一些外观及镜头上的设置，可以自己探索玩玩<br>利用Three.js呈现</p>
<p>关于音频处理方面的逻辑基本和之前介绍HTML5 Audio API那篇博客里讲的差不多，差别只在这个项目里面将频谱的展示从2d的canvas换成3d的WebGL进行展示，使用的是Three.js。所以只简单介绍关于3d场景方面的构建，具体实现可以访问项目GitHub页面下载源码。</p>
<p>构建跃动的柱条<br>每根绿色柱条是一个CubeGeometry，柱条上面的盖子也是CubeGeometry，只是长度更短而以，同时使用的是白色。</p>
<p>//创建绿色柱条的形状<br>var cubeGeometry = new THREE.CubeGeometry(MWIDTH, 1, MTHICKNESS);<br>//创建绿色柱条的材质<br>var cubeMaterial = new THREE.MeshPhongMaterial({<br>    color: 0x01FF00,<br>    ambient: 0x01FF00,<br>    specular: 0x01FF00,<br>    shininess: 20,<br>    reflectivity: 5.5<br>});<br>//创建白色盖子的形状<br>var capGeometry = new THREE.CubeGeometry(MWIDTH, 0.5, MTHICKNESS);<br>//创建白色盖子的材质<br>var capMaterial = new THREE.MeshPhongMaterial({<br>    color: 0xffffff,<br>    ambient: 0x01FF00,<br>    specular: 0x01FF00,<br>    shininess: 20,<br>    reflectivity: 5.5<br>});<br>上面只是创建了形状及材质，需要将这两者组合在一起形成一个模型，才是我们看到的实际物体。下面通过一个循环创建了一字排开的柱条和对应的盖子，然后添加到场景中。</p>
<p>//创建一字排开的柱条和盖子，并添加到场景中<br>for (var i = METERNUM - 1; i &gt;= 0; i–) {<br>    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);<br>    cube.position.x = -45 + (MWIDTH + GAP) <em> i;<br>    cube.position.y = -1;<br>    cube.position.z = 0.5;<br>    cube.castShadow = true;<br>    cube.name = ‘cube’ + i;<br>    scene.add(cube);<br>    var cap = new THREE.Mesh(capGeometry, capMaterial);<br>    cap.position.x = -45 + (MWIDTH + GAP) </em> i;<br>    cap.position.y = 0.5;<br>    cap.position.z = 0.5;<br>    cap.castShadow = true;<br>    cap.name = ‘cap’ + i;<br>    scene.add(cap);<br>};<br> 注意到我们为每个物体指定了名称以方便之后获取该物体。</p>
<p>添加动画</p>
<p>动画部分同时是使用requestAnimation，根据传入的音频分析器(analyser)的数据来更新每根柱条的长度。</p>
<p>var renderAnimation = function() {<br>    if (analyser) {<br>        //从音频分析器中获取数据<br>        var array = new Uint8Array(analyser.frequencyBinCount);<br>        analyser.getByteFrequencyData(array);<br>        var step = Math.round(array.length / METERNUM);<br>        //更新每根柱条的高度<br>        for (var i = 0; i &lt; METERNUM; i++) {<br>            var value = array[i * step] / 4;<br>            value = value &lt; 1 ? 1 : value;<br>            var meter = scene.getObjectByName(‘cube’ + i, true);<br>            meter.scale.y = value;<br>        }<br>    };<br>    //重新渲染画面<br>    render.render(scene, camera);<br>    requestAnimationFrame(renderAnimation);<br>};<br>requestAnimationFrame(renderAnimation);<br>对于白色盖子的处理稍微不同，因为它是缓慢下落的，不能使用及时送达的音频数据来更新它。实现的方式是每次动画更新中检查当前柱条的高度与前一时刻盖子的高度，看谁大，如果柱条更高，则盖子使用新的高度，否则盖子高度减1，这样就实现了缓落的效果。</p>
<p>var renderAnimation = function() {<br>    if (analyser) {<br>        var array = new Uint8Array(analyser.frequencyBinCount);<br>        analyser.getByteFrequencyData(array);<br>        var step = Math.round(array.length / METERNUM);<br>        for (var i = 0; i &lt; METERNUM; i++) {<br>            var value = array[i <em> step] / 4;<br>            value = value &lt; 1 ? 1 : value;<br>            var meter = scene.getObjectByName(‘cube’ + i, true),<br>                cap = scene.getObjectByName(‘cap’ + i, true);<br>            meter.scale.y = value;<br>            //计算柱条边沿尺寸以获得高度<br>            meter.geometry.computeBoundingBox();<br>            height = (meter.geometry.boundingBox.max.y - meter.geometry.boundingBox.min.y) </em> value;<br>            //将柱条高度与盖子高度进行比较<br>            if (height / 2 &gt; cap.position.y) {<br>                cap.position.y = height / 2;<br>            } else {<br>                cap.position.y -= controls.dropSpeed;<br>            };<br>        }<br>    };<br>    //重新渲染画面<br>    render.render(scene, camera);<br>    requestAnimationFrame(renderAnimation);<br>};<br>requestAnimationFrame(renderAnimation);<br>镜头控制</p>
<p>镜头的控制使用的是与Three.js搭配的一个插件ObitControls.js，如果你下载了Three.js的源码可以在里面找到。只需获取一个鼠标拖动的前后时间差，然后在动画循环中调用插件进行画面更新即可。</p>
<p>var orbitControls = new THREE.OrbitControls(camera);<br>orbitControls.minDistance = 50;<br>orbitControls.maxDistance = 200;<br>orbitControls.maxPolarAngle = 1.5;<br>var renderAnimation = function() {<br>    var delta = clock.getDelta();<br>    orbitControls.update(delta);<br>    if (analyser) {<br>        var array = new Uint8Array(analyser.frequencyBinCount);<br>        analyser.getByteFrequencyData(array);<br>        var step = Math.round(array.length / METERNUM);<br>        for (var i = 0; i &lt; METERNUM; i++) {<br>            var value = array[i <em> step] / 4;<br>            value = value &lt; 1 ? 1 : value;<br>            var meter = scene.getObjectByName(‘cube’ + i, true),<br>                cap = scene.getObjectByName(‘cap’ + i, true);<br>            meter.scale.y = value;<br>            //计算柱条边沿尺寸以获得高度<br>            meter.geometry.computeBoundingBox();<br>            height = (meter.geometry.boundingBox.max.y - meter.geometry.boundingBox.min.y) </em> value;<br>            //将柱条高度与盖子高度进行比较<br>            if (height / 2 &gt; cap.position.y) {<br>                cap.position.y = height / 2;<br>            } else {<br>                cap.position.y -= controls.dropSpeed;<br>            };<br>        }<br>    };<br>    //重新渲染画面<br>    render.render(scene, camera);<br>    requestAnimationFrame(renderAnimation);<br>};<br>requestAnimationFrame(renderAnimation);<br>注意到在实例化一个ObitControls后，进行了一些角度和镜头伸缩方面的设置，限制了用户把画面翻转到平面的底部，也保证了镜头在伸缩时不会太远及太近。</p>
<p>参数控制</p>
<p>右上角的控制面板可以进行画面的一些参数更改，使用的是谷歌员工创建的一个插件dat.gui.js 。</p>
<p>首先需要定义一个包含全部需要控制的参数的对象：</p>
<p>var controls = new function() {<br>        this.capColor = 0xFFFFFF;<br>        this.barColor = 0x01FF00;<br>        this.ambientColor = 0x0c0c0c;<br>        this.dropSpeed = 0.1;<br>        this.autoRotate = false;<br>    };<br>然后实例化一个控制器，将这个对象及相应参数进行绑定：</p>
<p>var gui = new dat.GUI();<br>//添加盖子下降速度的控制<br>gui.add(controls, ‘dropSpeed’, 0.1, 0.5);<br>//盖子颜色控制<br>gui.addColor(controls, ‘capColor’).onChange(function(e) {<br>    scene.children.forEach(function(child) {<br>        if (child.name.indexOf(‘cap’) &gt; -1) {<br>            child.material.color.setStyle(e);<br>            child.material.ambient = new THREE.Color(e)<br>            child.material.emissive = new THREE.Color(e)<br>            child.material.needsUpdate = true;<br>        }<br>    });<br>});<br>//柱条颜色控制<br>gui.addColor(controls, ‘barColor’).onChange(function(e) {<br>    scene.children.forEach(function(child) {<br>        if (child.name.indexOf(‘cube’) &gt; -1) {<br>            child.material.color.setStyle(e);<br>            child.material.ambient = new THREE.Color(e)<br>            child.material.emissive = new THREE.Color(e)<br>            child.material.needsUpdate = true;<br>        }<br>    });<br>});<br>//镜头自动移动控制<br>gui.add(controls, ‘autoRotate’).onChange(function(e) {<br>    orbitControls.autoRotate = e;<br>});<br>总结</p>
<p>完成了主要功能，但没达到我预期的效果，我想的是把柱条做成发光的，调研了一下，需要用更复杂的材质，同时也不能用WebGL来渲染画面了，性能是一方面，同时也还没研究得那么深入，所以就先出了这个版本先。以后或许弄个水波效果。</p>
<p>REFERENCE</p>
<p>Offical Documentation: <a href="http://threejs.org/docs/" target="_blank" rel="noopener">http://threejs.org/docs/</a></p>
<p>A Demo: <a href="http://srchea.com/blog/2013/05/experimenting-with-web-audio-api-three-js-webgl/" target="_blank" rel="noopener">http://srchea.com/blog/2013/05/experimenting-with-web-audio-api-three-js-webgl/</a></p>
<p>Another Example: <a href="https://github.com/arirusso/three-audio-spectrum" target="_blank" rel="noopener">https://github.com/arirusso/three-audio-spectrum</a></p>
<p>A Working Demo: <a href="http://badassjs.com/post/27056714305/plucked-html5-audio-editor-and-threeaudio-js" target="_blank" rel="noopener">http://badassjs.com/post/27056714305/plucked-html5-audio-editor-and-threeaudio-js</a></p>
<p>Dat GUI plugin: <a href="https://code.google.com/p/dat-gui/" target="_blank" rel="noopener">https://code.google.com/p/dat-gui/</a></p>
<p>PLEASE KINDLY SHOW YOUR RESPECT TO THE AUTHOR OF THIS ARTICLE</p>
<p>Feel free to repost but keep the link to this page please!</p>
<p>本文链接：<a href="http://www.cnblogs.com/Wayou/p/html5_audio_api_3d_visualizer_with_threejs.html" target="_blank" rel="noopener">http://www.cnblogs.com/Wayou/p/html5_audio_api_3d_visualizer_with_threejs.html</a></p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/threejs/">threejs</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/webgl/">webgl</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-javascript-dom-e4-ba-8b-e4-bb-b6-e7-9a-84-e4-b8-80-e4-ba-9b-e8-b5-84-e6-96-99" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/18/javascript-dom-e4-ba-8b-e4-bb-b6-e7-9a-84-e4-b8-80-e4-ba-9b-e8-b5-84-e6-96-99/" class="article-date">
  <time datetime="2014-03-18T11:21:19.000Z" itemprop="datePublished">2014-03-18</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/03/18/javascript-dom-e4-ba-8b-e4-bb-b6-e7-9a-84-e4-b8-80-e4-ba-9b-e8-b5-84-e6-96-99/">javascript DOM事件的一些资料</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>DOM <code>Event</code> interface<br>Event handlers may be attached to various objects including DOM elements, document, the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" target="_blank" rel="noopener">window object</a>, etc. When an event occurs, an event object is created and passed sequentially to the event listeners.</p>
<p>The DOM <code>Event</code> interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p>
<pre><code>function foo(evt) {
  // the evt parameter is automatically assigned the event object
  alert(evt);
}
</code></pre>
      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e6-89-8b-e6-9c-ba-e7-ab-af-e7-bd-91-e9-a1-b5-e6-b7-bb-e5-8a-a0active-e7-8a-b6-e6-80-81-e6-95-88-e6-9e-9c-add-active-state-in-mobile-page" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/13/e6-89-8b-e6-9c-ba-e7-ab-af-e7-bd-91-e9-a1-b5-e6-b7-bb-e5-8a-a0active-e7-8a-b6-e6-80-81-e6-95-88-e6-9e-9c-add-active-state-in-mobile-page/" class="article-date">
  <time datetime="2014-03-13T09:50:01.000Z" itemprop="datePublished">2014-03-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>►<a class="article-category-link" href="/categories/CSS-amp-HTML/web-development/">web development</a>►<a class="article-category-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/03/13/e6-89-8b-e6-9c-ba-e7-ab-af-e7-bd-91-e9-a1-b5-e6-b7-bb-e5-8a-a0active-e7-8a-b6-e6-80-81-e6-95-88-e6-9e-9c-add-active-state-in-mobile-page/">手机端网页添加active状态效果_add active state in mobile page</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>1.需要把链接在移动端上默认的一层半透明的层删掉<br>a{-webkit-tap-highlight-color: rgba(0,0,0,0);}<br>2.给document绑定一个<code>touchstart</code>事件<br>document.addEventListener(“touchstart”, function(){}, true);</p>
<p>链接: <a href="http://www.mobify.com/blog/beginners-guide-to-perceived-performance/" target="_blank" rel="noopener">http://www.mobify.com/blog/beginners-guide-to-perceived-performance/</a></p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css3/">css3</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/mobile/">mobile</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e6-89-8b-e6-9c-ba-e7-ab-af-e5-9b-ba-e5-ae-9a-e5-ae-9a-e4-bd-8d-e5-85-83-e7-b4-a0-e4-b8-8d-e5-8f-af-e7-82-b9-e5-87-bb-e9-97-ae-e9-a2-98-e5-a4-84-e7-90-86-mobile-fixed-element-can-not-click-issue" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/13/e6-89-8b-e6-9c-ba-e7-ab-af-e5-9b-ba-e5-ae-9a-e5-ae-9a-e4-bd-8d-e5-85-83-e7-b4-a0-e4-b8-8d-e5-8f-af-e7-82-b9-e5-87-bb-e9-97-ae-e9-a2-98-e5-a4-84-e7-90-86-mobile-fixed-element-can-not-click-issue/" class="article-date">
  <time datetime="2014-03-13T03:57:08.000Z" itemprop="datePublished">2014-03-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>►<a class="article-category-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a>►<a class="article-category-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/03/13/e6-89-8b-e6-9c-ba-e7-ab-af-e5-9b-ba-e5-ae-9a-e5-ae-9a-e4-bd-8d-e5-85-83-e7-b4-a0-e4-b8-8d-e5-8f-af-e7-82-b9-e5-87-bb-e9-97-ae-e9-a2-98-e5-a4-84-e7-90-86-mobile-fixed-element-can-not-click-issue/">手机端固定定位元素不可点击问题处理_mobile fixed element can not click issue</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>在安卓手机若一个div设置了固定定位，在给其隐藏后再控制让其显示，会出现不可点击的问题。<br>解决方法是不使用display:none;这个属性控制显示，而使用visibility:hidden;属性来控制其隐藏和显示</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS-3/">CSS 3</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html/">html</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/html5/">html5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/mobile/">mobile</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/webpage/">webpage</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e8-bd-acjquery-e6-8f-92-e4-bb-b6-e8-ae-be-e8-ae-a1-e6-a8-a1-e5-bc-8f-repostjquery-plugin-patterns" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/03/03/e8-bd-acjquery-e6-8f-92-e4-bb-b6-e8-ae-be-e8-ae-a1-e6-a8-a1-e5-bc-8f-repostjquery-plugin-patterns/" class="article-date">
  <time datetime="2014-03-03T03:25:05.000Z" itemprop="datePublished">2014-03-03</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a>►<a class="article-category-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a>►<a class="article-category-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/03/03/e8-bd-acjquery-e6-8f-92-e4-bb-b6-e8-ae-be-e8-ae-a1-e6-a8-a1-e5-bc-8f-repostjquery-plugin-patterns/">[转]Jquery 插件设计模式_[repost]jquery-plugin-patterns</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>原文：<a href="http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/" target="_blank" rel="noopener">coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/</a> By <a href="http://addyosmani.com/blog/" target="_blank" rel="noopener">Addy Osmani</a><br>译者原文: <a href="http://wlog.cn/jquery/essential-jquery-plugin-patterns.html" target="_blank" rel="noopener">http://wlog.cn/jquery/essential-jquery-plugin-patterns.html</a><br>译者注：目前还有部分内容没有翻译完成，如翻译有误，敬请指正。</p>
<p>我前面写过<a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank" rel="noopener">javascript 设计模式</a>，它为javascript开发中的一些常见问题提供了很好的解决方案，使用这些设计模式将使你的开发获益良多。众所周知，javascript 设计模式非常有用，另一方面得益于它自己的设计模式：jquery 插件。 官方的<a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">jQuery 插件开发指南</a> 可以作为学习编写插件的一个很好的开始。在这篇文章中我们将更深入了解jquery插件开发技巧。</p>
<p>jquery插件开发经过这几年的不断发展，我们现在很少只使用一种方式来编写插件。事实上，使用特定的设计模式在某些解决某些特定问题或场景，比其它模式更为有效。</p>
<p>一些开发人员可能希望使用jQuery UI 组件 工厂模式（the jQuery UI widget factory），这种模式适合复杂、灵活的UI组件。另外一些开发人员可能喜欢像模块(类似模块模式)一样组织他们的代码，或者使用更正式的模块模式如<a href="https://github.com/amdjs/amdjs-api/wiki/AMD" target="_blank" rel="noopener">AMD</a>(asynchronous module definition) 。还有一些开发人员希望他们的插件使用javascript强大的原型继承。还有另外一些开发人员可能想使用自定义的事件或发布/订阅(pub/sub)使插件和app之间通信。等等…</p>
<p>我注意到一些开发者尝试创建一种通用的jquery插件模板（one-size-fits-all jQuery plugin boilerplate）, 这引发了我的思考。理论上来说，使用统一模板（boilerplate）是一个很好的想法，然而，实际开发中，我们很少只使用一种模式来开发插件。</p>
<p>假如你自己动手编写过一些jquery插件，它们运行良好，但是，你可能会觉得它可以有更好的代码组织结构，它可以更灵活，解决更多的问题。这听起来很熟悉，你不确定不同的jquery插件模式之间的差异，你会发现我后面将要讲的内容非常有用。</p>
<p>这篇文章不会为你提供所有问题的解决方案，但是它覆盖了所有开发人员在使用的流行的设计模式。</p>
<p>注：这篇文章主要面向由中高级的开发人员。如果你觉得还没准备好，推荐你可以先看官方的<a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">jQuery 插件开发指南</a> 、Ben Alman的<a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759" target="_blank" rel="noopener">plugin style guide</a>和Remy Sharp的<a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/" target="_blank" rel="noopener">Signs of a Poorly Written jQuery Plugin</a>。</p>
<h2 id="模式-Patterns"><a href="#模式-Patterns" class="headerlink" title="模式(Patterns)"></a>模式(Patterns)</h2><p>jQuery插件定义了很少的规则，而这也是为什么这些插件方法多种多样的原因之一。最简单的，你可以为jquery的$.fn对象添加一个方法，如：</p>
<pre><code>$.fn.myPluginName = function() {
    // your plugin logic
};
</code></pre><p>前面的方法很间单，不过下面的这种方法会更好一些：</p>
<pre><code>(function( $ ){
    $.fn.myPluginName = function() {
        // your plugin logic
    };
})( jQuery );
</code></pre><p>这里，我们在插件代码内嵌到一个匿名函数中，使用匿名函数创建了一个闭包，将jQuery这个全局变量传入匿名函数，并执行匿名函数。这样可以确保$不会和其它的javascript库冲突，避免$变量和页面中的全局变量冲突。</p>
<p>还有另外一种写法是使用$.extend，使用这种方法一次可以定义多个方法，这在有些场景下非常有用：</p>
<pre><code>(function( $ ){
    $.extend($.fn, {
        myplugin: function(){
            // your plugin logic
        }
    });
})( jQuery );
</code></pre><p>对此，我们可以做一些改进。首先，我们来看第一个完整的模式 - 轻量级的模式（the lightweight pattern），这种模式覆盖了我们日常插件开发的一些最佳实践和常见问题。</p>
<p><strong>注意：</strong></p>
<p>你可在<a href="https://github.com/addyosmani/jquery-plugin-patterns/" target="_blank" rel="noopener">jquery-plugin-patterns</a>(翻译本文时，项目已经迁移到<a href="https://github.com/jquery-boilerplate/patterns" target="_blank" rel="noopener">jquery-boilerplate/patterns</a>)这个项目找到这篇文章里面谈到的设计模式。</p>
<p>虽然，这篇文章会对每一种模式做讲解，但是还是建议阅读代码中的注释，注释可以让你更深入的了解为什么使用这种做法是最好的。</p>
<p>另外，如果有兴趣的话也可以读一下每种模式后面的扩展内容。</p>
<h2 id="简单的开始-A-Lightweight-Start"><a href="#简单的开始-A-Lightweight-Start" class="headerlink" title="简单的开始(A Lightweight Start)"></a>简单的开始(A Lightweight Start)</h2><p>首先，我们先来看一些基本的、遵循最佳实践(包括jQuery插件编写指南)的设计模式。这种模式在开发一个新的插件或实现一些简单插件时非常理想。轻量级的插件模式遵循了下面的一些原则:</p>
<ul>
<li>常见的最佳做法，如函数的调用前使用一个分号; window, document, undefined作为参数传入;遵循jQuery风格规范。</li>
<li>插件默认配置。</li>
<li>一个简单的插件的构造函数,用于逻辑相关的初始化和委派元素处理。</li>
<li>使插件的配置可扩展。</li>
<li>避免创建多个实例。</li>
</ul>
<p>代码：</p>
<pre><code>/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */

// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly.
;(function ( $, window, document, undefined ) {

    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn&apos;t really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified.

    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = &apos;defaultPluginName&apos;,
        defaults = {
            propertyName: &quot;value&quot;
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the 
        // contents of two or more objects, storing the 
        // result in the first object. The first object 
        // is generally empty because we don&apos;t want to alter 
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element 
        // and this.options
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, &apos;plugin_&apos; + pluginName)) {
                $.data(this, &apos;plugin_&apos; + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://docs.jquery.com/Plugins/Authoring" target="_blank" rel="noopener">Plugins/Authoring</a>, jQuery</li>
<li><a href="http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/" target="_blank" rel="noopener">Signs of a Poorly Written jQuery Plugin</a>, Remy Sharp</li>
<li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff608209" target="_blank" rel="noopener">How to Create Your Own jQuery Plugin</a>, Elijah Manor</li>
<li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff696759" target="_blank" rel="noopener">Style in jQuery Plugins and Why It Matters</a>, Ben Almon</li>
<li><a href="http://enterprisejquery.com/2010/07/create-your-first-jquery-plugin-part-2-revising-your-plugin/" target="_blank" rel="noopener">Create Your First jQuery Plugin, Part 2</a>, Andrew Wirick</li>
</ul>
<h2 id="完整的-Widget-factory-“Complete”-Widget-Factory"><a href="#完整的-Widget-factory-“Complete”-Widget-Factory" class="headerlink" title="完整的 Widget factory(“Complete” Widget Factory)"></a>完整的 Widget factory(“Complete” Widget Factory)</h2><p>代码：</p>
<pre><code>/*!
 * jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @addyosmani
 * Further changes: @peolanha
 * Licensed under the MIT license
 */

;(function ( $, window, document, undefined ) {

    // define your widget under a namespace of your choice
    //  with additional parameters e.g. 
    // $.widget( &quot;namespace.widgetname&quot;, (optional) - an 
    // existing widget prototype to inherit from, an object 
    // literal to become the widget&apos;s prototype ); 

    $.widget( &quot;namespace.widgetname&quot; , {

        //Options to be used as defaults
        options: {
            someValue: null
        },

        //Setup widget (eg. element creation, apply theming
        // , bind events etc.)
        _create: function () {

            // _create will automatically run the first time 
            // this widget is called. Put the initial widget 
            // setup code here, then you can access the element 
            // on which the widget was called via this.element. 
            // The options defined above can be accessed 
            // via this.options this.element.addStuff();
        },

        // Destroy an instantiated plugin and clean up 
        // modifications the widget has made to the DOM
        destroy: function () {

            // this.element.removeStuff();
            // For UI 1.8, destroy must be invoked from the 
            // base widget
            $.Widget.prototype.destroy.call(this);
            // For UI 1.9, define _destroy instead and don&apos;t 
            // worry about 
            // calling the base widget
        },

        methodB: function ( event ) {
            //_trigger dispatches callbacks the plugin user 
            // can subscribe to
            // signature: _trigger( &quot;callbackName&quot; , [eventObject], 
            // [uiObject] )
            // eg. this._trigger( &quot;hover&quot;, e /*where e.type == 
            // &quot;mouseenter&quot;*/, { hovered: $(e.target)});
            this._trigger(&apos;methodA&apos;, event, {
                key: value
            });
        },

        methodA: function ( event ) {
            this._trigger(&apos;dataChanged&apos;, event, {
                key: value
            });
        },

        // Respond to any changes the user makes to the 
        // option method
        _setOption: function ( key, value ) {
            switch (key) {
            case &quot;someValue&quot;:
                //this.options.someValue = doSomethingWith( value );
                break;
            default:
                //this.options[ key ] = value;
                break;
            }

            // For UI 1.8, _setOption must be manually invoked 
            // from the base widget
            $.Widget.prototype._setOption.apply( this, arguments );
            // For UI 1.9 the _super method can be used instead
            // this._super( &quot;_setOption&quot;, key, value );
        }
    });

})( jQuery, window, document );
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://ajpiano.com/widgetfactory/#slide1" target="_blank" rel="noopener">The jQuery UI Widget Factory</a></li>
<li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff706600" target="_blank" rel="noopener">Introduction to Stateful Plugins and the Widget Factory</a>，Doug Neiner</li>
<li><a href="http://wiki.jqueryui.com/w/page/12138135/Widget%20factory" target="_blank" rel="noopener">Widget Factory(explained)</a> Scott Gonzalez</li>
<li><a href="http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/" target="_blank" rel="noopener">Understanding jQuery UI Widgets: A Tutorial</a>，Hacking at 0300</li>
</ul>
<h2 id="命名空间和嵌套的命名空间"><a href="#命名空间和嵌套的命名空间" class="headerlink" title="命名空间和嵌套的命名空间"></a>命名空间和嵌套的命名空间</h2><p>使用命名空间可以避免你的代码和和全局变量或对象冲突。命名空间可以保护你的插件不会被页面上的其它同名变量或者和你的插件同名的插件破坏。同样，你也不要使其它开发者的脚本无法运行。</p>
<p>JavaScript没有其它语言一样的内置了命名空间，但很容易使用对象来模拟命名空间。可以将一个顶级对象作为你的命名空间，可以在一开始先检查这个对象是否存在，如果不存在就定义它，如果存在，你直接可以扩展它。</p>
<p>对象（确切地说，对象字面量）可以用来创建嵌套的命名空间，如namespace.subnamespace.pluginName等。</p>
<pre><code>/*!
 * jQuery namespaced &apos;Starter&apos; plugin boilerplate
 * Author: @dougneiner
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

;(function ( $ ) {
    if (!$.myNamespace) {
        $.myNamespace = {};
    };

    $.myNamespace.myPluginName = function ( el, myFunctionParam, options ) {
        // To avoid scope issues, use &apos;base&apos; instead of &apos;this&apos;
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data( &quot;myNamespace.myPluginName&quot; , base );

        base.init = function () {
            base.myFunctionParam = myFunctionParam;

            base.options = $.extend({}, 
            $.myNamespace.myPluginName.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        // base.functionName = function( paramaters ){
        // 
        // };
        // Run initializer
        base.init();
    };

    $.myNamespace.myPluginName.defaultOptions = {
        myDefaultValue: &quot;&quot;
    };

    $.fn.mynamespace_myPluginName = function 
        ( myFunctionParam, options ) {
        return this.each(function () {
            (new $.myNamespace.myPluginName(this, 
            myFunctionParam, options));
        });
    };

})( jQuery );
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/" target="_blank" rel="noopener">Namespacing in JavaScript</a>,Angus Croll</li>
<li><a href="http://ryanflorence.com/use-your-fn-jquery-namespace/" target="_blank" rel="noopener">Use Your $.fn jQuery Namespace</a>,Ryan Florence</li>
<li><a href="http://michaux.ca/articles/javascript-namespacing" target="_blank" rel="noopener">JavaScript Namespacing</a>,Peter Michaux</li>
<li><a href="http://www.2ality.com/2011/04/modules-and-namespaces-in-javascript.html" target="_blank" rel="noopener">Modules and namespaces in JavaScript</a>,Axel Rauschmayer</li>
</ul>
<h2 id="Pub-Sub自定义事件"><a href="#Pub-Sub自定义事件" class="headerlink" title="Pub/Sub自定义事件"></a>Pub/Sub自定义事件</h2><p>你可能在开发异步JavaScript应用时使用过观察者模式（ 又名发布-订阅者模式(Pub/Sub) pattern）。观察者模式的本质是对应用中某个对象状态进行观察，并且在其发生改变时能够对通知做出响应。</p>
<p>在jQuery中，jquery提供的自定义事件和观察者模式很类似，bind(‘eventType’)相当于subscribe(‘eventType’)，trigger(‘eventType’)相当于publish(‘eventType’)。</p>
<p>一些开发者可能认为jQuery事件系统作为发布和订阅系统使用开销太大，但是它的构架在多数情况下非常健壮和稳定。在 jQuery UI widget factory 模板中，我们实现了一个基本的自定义事件的发布/订阅模式：</p>
<pre><code>/*!
 * jQuery custom-events plugin boilerplate
 * Author: DevPatch
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

// In this pattern, we use jQuery&apos;s custom events to add 
// pub/sub (publish/subscribe) capabilities to widgets. 
// Each widget would publish certain events and subscribe 
// to others. This approach effectively helps to decouple 
// the widgets and enables them to function independently.

;(function ( $, window, document, undefined ) {
    $.widget(&quot;ao.eventStatus&quot;, {
        options: {

        },

        _create : function() {
            var self = this;

            //self.element.addClass( &quot;my-widget&quot; );

            //subscribe to &apos;myEventStart&apos;
            self.element.bind( &quot;myEventStart&quot;, function( e ) {
                console.log(&quot;event start&quot;);
            });

            //subscribe to &apos;myEventEnd&apos;
            self.element.bind( &quot;myEventEnd&quot;, function( e ) {
                console.log(&quot;event end&quot;);
            });

            //unsubscribe to &apos;myEventStart&apos;
            //self.element.unbind( &quot;myEventStart&quot;, function(e){
                ///console.log(&quot;unsubscribed to this event&quot;); 
            //});
        },

        destroy: function(){
            $.Widget.prototype.destroy.apply( this, arguments );
        },
    });
})( jQuery, window , document );

//Publishing event notifications
//usage: 
// $(&quot;.my-widget&quot;).trigger(&quot;myEventStart&quot;);
// $(&quot;.my-widget&quot;).trigger(&quot;myEventEnd&quot;);
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://wlog.cn/jquery/essential-jquery-plugin-patterns.html" target="_blank" rel="noopener">Communication Between jQuery UI Widgets</a>,Benjamin Sternthal</li>
<li><a href="http://wlog.cn/jquery/essential-jquery-plugin-patterns.html" target="_blank" rel="noopener">Understanding the Publish/Subscribe Pattern for Greater JavaScript Scalability</a>,Addy Osmani</li>
</ul>
<h2 id="带桥接模式的原型继承"><a href="#带桥接模式的原型继承" class="headerlink" title="带桥接模式的原型继承"></a>带桥接模式的原型继承</h2><p>在javascript中，没有类的概念。但是，我们可以使用javascript的原型继承，我们可以在juqery插件开发中使用原型继承。</p>
<p><a href="http://alexsexton.com/" target="_blank" rel="noopener">Alex Sexton</a> 和 <a href="http://scottgonzalez.com/" target="_blank" rel="noopener">Scott Gonzalez</a>已经详细的谈过这个话题。简而言之,使用桥接模式可以弱化它和使用它的类和对象之间的耦合。另外，桥接模式有助于保持API的简洁，你可以更容易的对你的插件进行单元测试。</p>
<p>在Sexton的文章中，他实现了一个可以让你添加自己的逻辑代码的桥接模式模板，你可以看下面的代码了解更多。这种模式的另一个优点你不必不断重复相同的插件初始化代码。一些开发人员可能觉得这种模式比其它模式更容易阅读：</p>
<pre><code>/*!
 * jQuery prototypal inheritance plugin boilerplate
 * Author: Alex Sexton, Scott Gonzalez
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

// myObject - an object representing a concept that you want 
// to model (e.g. a car)
var myObject = {
  init: function( options, elem ) {
    // Mix in the passed-in options with the default options
    this.options = $.extend( {}, this.options, options );

    // Save the element reference, both as a jQuery
    // reference and a normal reference
    this.elem  = elem;
    this.$elem = $(elem);

    // Build the DOM&apos;s initial structure
    this._build();

    // return this so that we can chain and use the bridge with less code.
    return this;
  },
  options: {
    name: &quot;No name&quot;
  },
  _build: function(){
    //this.$elem.html(&apos;
</code></pre><h1 id="‘-this-options-name-’"><a href="#‘-this-options-name-’" class="headerlink" title="‘+this.options.name+’"></a>‘+this.options.name+’</h1><p>‘);<br>      },<br>      myMethod: function( msg ){<br>        // You have direct access to the associated and cached<br>        // jQuery element<br>        // this.$elem.append(‘</p>
<p>‘+msg+’<br>‘);<br>      }<br>    };</p>
<pre><code>// Object.create support test, and fallback for browsers without it
if ( typeof Object.create !== &apos;function&apos; ) {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

// Create a plugin based on a defined object
$.plugin = function( name, object ) {
  $.fn[name] = function( options ) {
    return this.each(function() {
      if ( ! $.data( this, name ) ) {
        $.data( this, name, Object.create(object).init( 
        options, this ) );
      }
    });
  };
};

// Usage:
// With myObject, we could now essentially do this:
// $.plugin(&apos;myobj&apos;, myObject);

// and at this point we could do the following
// $(&apos;#elem&apos;).myobj({name: &quot;John&quot;});
// var inst = $(&apos;#elem&apos;).data(&apos;myobj&apos;);
// inst.myMethod(&apos;I am a method&apos;);
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://alexsexton.com/?p=51" target="_blank" rel="noopener">Using Inheritance Patterns To Organize Large jQuery Applications</a>,Alex Sexton</li>
<li><a href="http://www.slideshare.net/SlexAxton/how-to-manage-large-jquery-apps" target="_blank" rel="noopener">How to Manage Large Applications With jQuery or Whatever</a>, Alex Sexton</li>
<li><a href="http://blog.bigbinary.com/2010/03/12/pratical-example-of-need-for-prototypal-inheritance.html" target="_blank" rel="noopener">Practical Example of the Need for Prototypal Inheritance</a>,Neeraj Singh</li>
<li><a href="http://javascript.crockford.com/prototypal.html" target="_blank" rel="noopener">Prototypal Inheritance in JavaScript</a>,Douglas Crockford</li>
</ul>
<h2 id="jQuery-UI-Widget-Factory-Bridge"><a href="#jQuery-UI-Widget-Factory-Bridge" class="headerlink" title="jQuery UI Widget Factory Bridge"></a>jQuery UI Widget Factory Bridge</h2><pre><code>/*!
 * jQuery UI Widget factory &quot;bridge&quot; plugin boilerplate
 * Author: @erichynds
 * Further changes, additional comments: @addyosmani
 * Licensed under the MIT license
 */

// a &quot;widgetName&quot; object constructor
// required: this must accept two arguments,
// options: an object of configuration options
// element: the DOM element the instance was created on
var widgetName = function( options, element ){
  this.name = &quot;myWidgetName&quot;;
  this.options = options;
  this.element = element;
  this._init();
}

// the &quot;widgetName&quot; prototype
widgetName.prototype = {

    // _create will automatically run the first time this 
    // widget is called
    _create: function(){
        // creation code
    },

    // required: initialization logic for the plugin goes into _init
    // This fires when your instance is first created and when 
    // attempting to initialize the widget again (by the bridge)
    // after it has already been initialized.
    _init: function(){
        // init code
    },

    // required: objects to be used with the bridge must contain an 
    // &apos;option&apos;. Post-initialization, the logic for changing options
    // goes here. 
    option: function( key, value ){

        // optional: get/change options post initialization
        // ignore if you don&apos;t require them.

        // signature: $(&apos;#foo&apos;).bar({ cool:false });
        if( $.isPlainObject( key ) ){
            this.options = $.extend( true, this.options, key );

        // signature: $(&apos;#foo&apos;).option(&apos;cool&apos;); - getter
        } else if ( key &amp;&amp; typeof value === &quot;undefined&quot; ){
            return this.options[ key ];

        // signature: $(&apos;#foo&apos;).bar(&apos;option&apos;, &apos;baz&apos;, false);
        } else {
            this.options[ key ] = value;
        }

        // required: option must return the current instance. 
        // When re-initializing an instance on elements, option 
        // is called first and is then chained to the _init method.
        return this;  
    },

    // notice no underscore is used for public methods
    publicFunction: function(){ 
        console.log(&apos;public function&apos;);
    },

    // underscores are used for private methods
    _privateFunction: function(){ 
        console.log(&apos;private function&apos;);
    }
};

// usage:

// connect the widget obj to jQuery&apos;s API under the &quot;foo&quot; namespace
// $.widget.bridge(&quot;foo&quot;, widgetName);

// create an instance of the widget for use
// var instance = $(&quot;#elem&quot;).foo({
//     baz: true
// });

// your widget instance exists in the elem&apos;s data
// instance.data(&quot;foo&quot;).element; // =&gt; #elem element

// bridge allows you to call public methods...
// instance.foo(&quot;publicFunction&quot;); // =&gt; &quot;public method&quot;

// bridge prevents calls to internal methods
// instance.foo(&quot;_privateFunction&quot;); // =&gt; #elem element
</code></pre><p><strong>扩展阅读</strong></p>
<ul>
<li><a href="http://erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/" target="_blank" rel="noopener">Using $.widget.bridge Outside of the Widget Factory</a>,Eric Hynds</li>
</ul>
<h2 id="jQuery-Mobile-Widgets-With-The-Widget-factory"><a href="#jQuery-Mobile-Widgets-With-The-Widget-factory" class="headerlink" title="jQuery Mobile Widgets With The Widget factory"></a>jQuery Mobile Widgets With The Widget factory</h2><pre><code>/*!
 * (jQuery mobile) jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @scottjehl
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

;(function ( $, window, document, undefined ) {

    //define a widget under a namespace of your choice
    //here &apos;mobile&apos; has been used in the first parameter
    $.widget( &quot;mobile.widgetName&quot;, $.mobile.widget, {

        //Options to be used as defaults
        options: {
            foo: true,
            bar: false
        },

        _create: function() {
            // _create will automatically run the first time this 
            // widget is called. Put the initial widget set-up code 
            // here, then you can access the element on which 
            // the widget was called via this.element
            // The options defined above can be accessed via 
            // this.options

            //var m = this.element,
            //p = m.parents(&quot;:jqmData(role=&apos;page&apos;)&quot;),
            //c = p.find(&quot;:jqmData(role=&apos;content&apos;)&quot;)
        },

        // Private methods/props start with underscores
        _dosomething: function(){ ... },

        // Public methods like these below can can be called 
                // externally: 
        // $(&quot;#myelem&quot;).foo( &quot;enable&quot;, arguments );

        enable: function() { ... },

        // Destroy an instantiated plugin and clean up modifications 
        // the widget has made to the DOM
        destroy: function () {
            //this.element.removeStuff();
            // For UI 1.8, destroy must be invoked from the 
            // base widget
            $.Widget.prototype.destroy.call(this);
            // For UI 1.9, define _destroy instead and don&apos;t 
            // worry about calling the base widget
        },

        methodB: function ( event ) {
            //_trigger dispatches callbacks the plugin user can 
            // subscribe to
            //signature: _trigger( &quot;callbackName&quot; , [eventObject],
            //  [uiObject] )
            // eg. this._trigger( &quot;hover&quot;, e /*where e.type == 
            // &quot;mouseenter&quot;*/, { hovered: $(e.target)});
            this._trigger(&apos;methodA&apos;, event, {
                key: value
            });
        },

        methodA: function ( event ) {
            this._trigger(&apos;dataChanged&apos;, event, {
                key: value
            });
        },

        //Respond to any changes the user makes to the option method
        _setOption: function ( key, value ) {
            switch (key) {
            case &quot;someValue&quot;:
                //this.options.someValue = doSomethingWith( value );
                break;
            default:
                //this.options[ key ] = value;
                break;
            }

            // For UI 1.8, _setOption must be manually invoked from 
            // the base widget
            $.Widget.prototype._setOption.apply(this, arguments);
            // For UI 1.9 the _super method can be used instead
            // this._super( &quot;_setOption&quot;, key, value );
        }
    });

})( jQuery, window, document );

//usage: $(&quot;#myelem&quot;).foo( options );

/* Some additional notes - delete this section before using the boilerplate.

 We can also self-init this widget whenever a new page in jQuery Mobile is created. jQuery Mobile&apos;s &quot;page&quot; plugin dispatches a &quot;create&quot; event when a jQuery Mobile page (found via data-role=page attr) is first initialized.

We can listen for that event (called &quot;pagecreate&quot; ) and run our plugin automatically whenever a new page is created.

$(document).bind(&quot;pagecreate&quot;, function (e) {
    // In here, e.target refers to the page that was created 
    // (it&apos;s the target of the pagecreate event)
    // So, we can simply find elements on this page that match a 
    // selector of our choosing, and call our plugin on them.
    // Here&apos;s how we&apos;d call our &quot;foo&quot; plugin on any element with a 
    // data-role attribute of &quot;foo&quot;:
    $(e.target).find(&quot;[data-role=&apos;foo&apos;]&quot;).foo(options);

    // Or, better yet, let&apos;s write the selector accounting for the configurable 
    // data-attribute namespace
    $(e.target).find(&quot;:jqmData(role=&apos;foo&apos;)&quot;).foo(options);
});

That&apos;s it. Now you can simply reference the script containing your widget and pagecreate binding in a page running jQuery Mobile site, and it will automatically run like any other jQM plugin.
 */
</code></pre><h2 id="RequireJS-And-The-jQuery-UI-Widget-Factory"><a href="#RequireJS-And-The-jQuery-UI-Widget-Factory" class="headerlink" title="RequireJS And The jQuery UI Widget Factory"></a>RequireJS And The jQuery UI Widget Factory</h2><h2 id="Globally-And-Per-Call-Overridable-Options-Best-Options-Pattern"><a href="#Globally-And-Per-Call-Overridable-Options-Best-Options-Pattern" class="headerlink" title="Globally And Per-Call Overridable Options (Best Options Pattern)"></a>Globally And Per-Call Overridable Options (Best Options Pattern)</h2><h2 id="AMD-And-CommonJS-Compatible-Modules"><a href="#AMD-And-CommonJS-Compatible-Modules" class="headerlink" title="AMD- And CommonJS-Compatible Modules"></a>AMD- And CommonJS-Compatible Modules</h2><h2 id="如何编写一个优秀的插件？"><a href="#如何编写一个优秀的插件？" class="headerlink" title="如何编写一个优秀的插件？"></a>如何编写一个优秀的插件？</h2><p>最后，来看一下我在选择第三方插件时遵循的一些原则，它对你开发插件来说非常有用:</p>
<p><strong>质量</strong></p>
<p>尽可能的遵循javascript和juqery最佳实践。在编辑写插件时，思考一下，这是最佳的解决方案吗？它们是否遵循jQuery 插件开发指南？如果不是，你的代码至少应该干净可读。</p>
<p><strong>兼容性</strong></p>
<p>你的插件都支持哪个版本的jquery?最新的版本是否经过测试？ 我更喜欢一些插件作者在必要时更新他们的插件，至少，测试一下插件对jquery新版本的支持情况，确保插件正常运行。</p>
<p><strong>可靠性</strong></p>
<p>你的插件应该有单元测试，单元测试不仅可以验证你的插件能否正常的运行，同时可以保证在不影响用户使用的情况下改进你的插件。我认为用于在生产环境插件都需要进行单元测试，它们并不难写。建议你可以看一下<a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg749824" target="_blank" rel="noopener">QUnit下的JavaScript自动化单元测试</a>。</p>
<p><strong>性能</strong></p>
<p>如果你的插件需要执行大量复杂的计算，或者频繁对DOM进行操作，建议你使用<a href="http://jsperf.com/" target="_blank" rel="noopener">jsPerf.com</a>测试你的代码在不同的浏览器的性能。</p>
<p><strong>文档</strong></p>
<p>如果你打算让其它的开发人员使用你的插件，请确保它有良好的文档。插件有哪些方法？有哪些配置选项？有哪些用户需要注意的陷阱？如果他们无法搞清楚你的插件如何使用，他们可能会寻找别外和替代方案。另外，你的代码也需要良好的注释，这对于使用你插件的其他开发者很有用。 If someone feels they can navigate your code base well enough to fork it or improve it, then you’ve done a good job.</p>
<p><strong>维护</strong></p>
<p>发布一个插件时，预计一下你会有多少时间来提供插件的维护和支持。我们都喜欢在一些社区分享自己的插件，但这需要时间和精力来回答问题,解决问题,并做出改进。最简单的，你可以ReadMe文件中说明，让用户自己决定是否他们自己来修复遇到的问题。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>前面，我们探讨了几种可以改善jquery插件开发的设计模式。在特定的场景下，一些模式会比另一些更合适，我希望代码中的注释对有助于你深入理解这些设计模式。</p>
<p>记住，不要为了使用设计模式而使用设计模式，而是需要花些时间去理解这些模式，了解如何选择合适的模式来解决你的问题或适应你的组件。总之，选择合适的设计模式很重要。</p>
<p>-happy coding!</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jquery/">jquery</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-ie6-e5-8d-8a-e9-80-8f-e6-98-8e-e6-9c-80-e5-a5-bd-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95dd-belatedpng" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/02/26/ie6-e5-8d-8a-e9-80-8f-e6-98-8e-e6-9c-80-e5-a5-bd-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95dd-belatedpng/" class="article-date">
  <time datetime="2014-02-26T01:32:27.000Z" itemprop="datePublished">2014-02-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/02/26/ie6-e5-8d-8a-e9-80-8f-e6-98-8e-e6-9c-80-e5-a5-bd-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95dd-belatedpng/">ie6半透明最好解决方法DD_belatedPNG</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>使用DD_belatedPNG在页面加入ie6专用代码:<br><code>&amp;lt;!--[if IE 6]&amp;gt;
&amp;lt;script type=&quot;text/javascript&quot; src=&quot;DD_belatedPNG.js&quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;
/* EXAMPLE */
DD_belatedPNG.fix(&#39;.png_bg&#39;);
/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
&amp;lt;/script&amp;gt;
&amp;lt;![endif]--&amp;gt;</code><br>这里的选择器填写需要半透明效果的元素</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ie/">ie</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-ie-e4-b8-8boverflowhidden-e5-a4-b1-e6-95-88-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/02/23/ie-e4-b8-8boverflowhidden-e5-a4-b1-e6-95-88-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95/" class="article-date">
  <time datetime="2014-02-23T05:43:07.000Z" itemprop="datePublished">2014-02-23</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/02/23/ie-e4-b8-8boverflowhidden-e5-a4-b1-e6-95-88-e8-a7-a3-e5-86-b3-e6-96-b9-e6-b3-95/">IE下overflow:hidden 失效解决方法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>在父元素上加上position:relative;</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ie/">ie</a></li></ul>

    </footer>
  </div>
  


</article>
  
    <article id="post-e6-90-9e-e7-ac-91-e8-a7-86-e9-a2-91-e6-9d-be-e9-bc-a0-e3-80-81-e5-9d-9a-e6-9e-9c-e5-92-8c-e6-97-b6-e9-97-b4-e6-9c-ba-e5-99-a8" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2014/02/18/e6-90-9e-e7-ac-91-e8-a7-86-e9-a2-91-e6-9d-be-e9-bc-a0-e3-80-81-e5-9d-9a-e6-9e-9c-e5-92-8c-e6-97-b6-e9-97-b4-e6-9c-ba-e5-99-a8/" class="article-date">
  <time datetime="2014-02-18T14:46:45.000Z" itemprop="datePublished">2014-02-18</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/智趣/">智趣</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/02/18/e6-90-9e-e7-ac-91-e8-a7-86-e9-a2-91-e6-9d-be-e9-bc-a0-e3-80-81-e5-9d-9a-e6-9e-9c-e5-92-8c-e6-97-b6-e9-97-b4-e6-9c-ba-e5-99-a8/">搞笑视频:松鼠、坚果和时间机器</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>创意搞笑视频:</p>
<iframe src="http://player.youku.com/embed/XMzMxOTI5MTY4" height="498" width="600" allowfullscreen="true" frameborder="0"></iframe>
      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
    </footer>
  </div>
  


</article>
  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="/page/2/">&laquo; Prev</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><a class="page-number" href="/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/page/13/">13</a><a class="extend next" rel="next" href="/page/4/">Next &raquo;</a>
    </nav>
  
</section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>